<template>
  <div class="admin-review-claim-view" @touchmove.prevent @mousewheel.prevent>
    <!-- 左侧列表 -->
    <div class="claim-list" @touchmove.prevent  @mousewheel.prevent>
      <div v-if="claimList.length === 0" class="empty-claim">
        <h3>当前没有可审核的申领</h3>
        </div>
      <div 
      v-for="claim in claimList" 
      :key="claim.id" 
      @click="showClaimDetails(claim)" 
      class="claim-option">
        <h4>申领用户：{{ claim.user.user_name }}</h4>
        <div>申领id：{{ claim.id }}</div>
        <div>申领日期：{{ claim.claim_time }}</div>
        <div>被申领门户：{{ claim.scholar.display_name }}</div>
      </div>
    </div>

    <!-- 右侧详细内容 -->
    <div class="claim-details">
      <div v-if="selectedClaim" class="top-section">
        <h2>申领人：{{ selectedClaim.user.user_name }}<span style="font-size: medium; color: rgb(105, 100, 100);">(申领id：{{ selectedClaim.id }})</span></h2>
        <p>申领日期：{{ selectedClaim.claim_time }}</p>
        <p>申领人邮箱：{{ selectedClaim.user.email }}</p>
        <p>申领人个人介绍：{{ selectedClaim.introduction }}</p>
        <h3>被申领的门户：<a @click="toScholar(selectedClaim.scholar.id)">{{ selectedClaim.scholar.display_name }}</a></h3>
        <p v-if="selectedClaim.scholar.last_known_institution.display_name">门户最近所在机构：{{ selectedClaim.scholar.last_known_institution.display_name }}</p>
        <p>申领图片：</p>
        <el-image :src="selectedClaim.material" :fit="fit" style="height: 350px;">
          <template #placeholder>
            <div class="image-slot">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
      </div>

      <div v-if="selectedClaim" class="middle-section">
      </div>

      <div v-if="selectedClaim" class="bottom-section">
        <el-button @click="showRejectDialog" type="danger">驳回</el-button>
        <el-button @click="showApproveDialog" type="success">通过</el-button>
      </div>
    </div>
  </div>

</template>

<script>
import { req_applyList, req_rejectClaim, req_approveClaim } from '../../../api/index'
import { ElMessage } from 'element-plus';

export default {
  name: 'AdminReviewClaimView',
  data() {
    return {
      claimList: [], // 门户申请列表
      selectedClaim: null, // 当前选中的门户申请
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    };
  },
  methods: {
    showClaimDetails(claim) {
      // 点击左侧列表项，显示右侧详细内容
      this.selectedClaim = claim;
    },
    showRejectDialog(){
      ElMessageBox.confirm('是否已经线下确认申领者不是本人',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'waring',
      }).then(() => {
        this.rejectClaim();
      }).catch(() => {
        // 用户点击了取消按钮，可以不执行任何操作，或者根据需求进行其他处理
      });
    },
    showApproveDialog(){
      ElMessageBox.confirm('是否已经线下确认申领者是本人',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'waring',
      }).then(() => {
        this.approveClaim();
      }).catch(() => {
        // 用户点击了取消按钮，可以不执行任何操作，或者根据需求进行其他处理
      });
    },
    rejectClaim() {
      // 驳回门户申请的操作
      const claimId = this.selectedClaim.id;
      req_rejectClaim(claimId)
      .then(response => {
        const errno = response.data.errno;
        const msg = response.data.msg;

        if (errno === 1) {          
          // 驳回成功后，更新前端页面，移除已被驳回的门户申请
          this.claimList = this.claimList.filter(claim => claim.id !== claimId);
          ElMessage.success(msg);
          // 如果还有其他门户申请，选中第一个
          if (this.claimList.length > 0) {
            this.selectedClaim = this.claimList[0];
          } else {
            // 如果没有其他门户申请，清空选中状态
            this.selectedClaim = null;
          }
        } else if (errno === 1001 || errno === 1002 || errno === 1003 || errno === 2001) {
            ElMessage.info(msg);
        } else {
          console.error('Error rejecting portal apply:', msg);
        }
      })
      .catch(error => {
        console.error('Error rejecting portal apply:', error);
      });
    },
    approveClaim() {
      // 通过门户申请的操作
      const claimId = this.selectedClaim.id;
      console.log("claim:",claimId);
      req_approveClaim(claimId)
        .then(response => {
          const errno = response.data.errno;
          const msg = response.data.msg;
          console.log("masg:",msg);

          if (errno === 1) {
            // 更新前端页面，移除已被通过的门户申请
            this.claimList = this.claimList.filter(claim => claim.id !== claimId);
            ElMessage.success(msg);
            // 如果还有其他门户申请，选中第一个
            if (this.claimList.length > 0) {
              this.selectedClaim = this.claimList[0];
            } else {
              // 如果没有其他门户申请，清空选中状态
              this.selectedClaim = null;
            }
          } else if (errno === 1001 || errno === 1002 || errno === 1003 || errno === 2001) {
            ElMessage.info(msg);
          } else {
            console.error('Error approving portal apply:', msg);
          }
        })
        .catch(error => {
          console.error('Error approving portal apply:', error);
        });
    },
    toScholar(scholarId){
      const scholar_id = scholarId;
      const route = this.$router.resolve({
        name: 'scholar', params: { scholar_id }
      });
      window.open(route.href, '_blank');
    },
  },
  mounted() {
    // 初始化门户申请列表的数据
    this.claimList = [
      { id: 1, 
        claim_time: '2023-11-18', 
        user: {
          "id": 123,
          "user_name": "JohnDoe",
          "email": "john@example.com",
          "type": "normal"
      }, 
        scholar: {
            "id": 456,
            "display_name": "Dr. Jane Smith"
        } },
        { id: 2, 
        claim_time: '2023-12-18', 
        user: {
          "id": 123,
          "user_name": "zht",
          "email": "zht@example.com",
          "type": "normal"
      }, 
        scholar: {
            "id": 456,
            "display_name": "Dr. Jane Smith"
        } },
        { id: 2, 
        claim_time: '2023-12-18', 
        user: {
          "id": 123,
          "user_name": "zht",
          "email": "zht@example.com",
          "type": "normal"
      }, 
        scholar: {
            "id": 456,
            "display_name": "Dr. Jane Smith"
        } },
        
    ];
    if (this.claimList.length > 0) {
      this.selectedClaim = this.claimList[0];
    }

    req_applyList().then(response => {
        const errno = response.data.errno;
        const msg = response.data.msg;

        if (errno === 1) {
          this.claimList = response.data.claim;
          console.log("list:",this.claimList);
          // 默认选中第一个门户申请
          if (this.claimList.length > 0) {
            this.selectedClaim = this.claimList[0];
          }
        } else {
          console.error('Error fetching portal apply list:', msg);
        }
      })
      .catch(error => {
        console.error('Error fetching portal apply list:', error);
      });
  },
};
</script>

<style scoped>

.admin-review-claim-view {
  display: flex;
  height: 570px;
}

.claim-list {
  width: 30%; /* 左侧列表宽度可根据需要调整 */
  border-right: 1px solid #ccc;
  padding: 20px;
  max-height: fit-content;
  overflow-y: auto; /* 启用垂直滚动条 */
}

.claim-list > div {
  cursor: pointer;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #999797a8;
}

.claim-option {
  /* 减缓上升下降速度 */
  background: linear-gradient(#fff 0 0) var(--p, 0) / var(--p, 0) no-repeat;
  transition: .4s, background-position 0s;
  /* 鼠标悬停时的样式 */
  &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 20px rgba(77, 74, 74, 0.5); /* 外发光效果 */
        
        background: var(--hover); /* 淡灰色 */
    }
}
.claim-details {
  flex: 1;
  padding: 20px;
}

.top-section {
  margin-bottom: 20px;
}

.bottom-section {
  margin-inline-start: 20%;
  margin-inline-end: 40%;
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
}
a {
    cursor: pointer;
    text-decoration: underline; /* 添加下划线 */
    color: inherit; /* 继承父元素的颜色，保持默认颜色 */
  }

a:hover {
    color: #3e76e6; /* 在悬停时变更颜色 */
  }
</style>
